<template>
  <div id="home">
	  <!-- 头部 -->
    <navbar></navbar>
	<!-- 搜索弹出框 -->
	<van-popup v-model="$store.state.showSearch" :overlay="false" position="right" :style="{ width:'100%'}" closeable close-icon="https://ts1.cn.mm.bing.net/th/id/R-C.52c0c406eb42137eec29de376a97b3ba?rik=T8hkCA7qqkqt6g&riu=http%3a%2f%2fpic.616pic.com%2fys_img%2f00%2f10%2f51%2fqyPgsjo0rE.jpg&ehk=rQ9jTvp1edrm4%2fuGQqpyZYck06agBfb9xv5cU8l%2bsXA%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1" close-icon-position="top-left"><search></search></van-popup>
	
	<!-- 分类 -->
	<div id="sort">
		<van-grid direction="horizontal" :column-num="2" :gutter="10" :border='false'>
		  <van-grid-item default @click="columns">
			  <!-- 连载 -->
			  <van-nav-bar>
				<template #left>
				    <van-icon size="28" name="orders-o" color="#333"/><span>连载</span>
				</template>
			    <template #right>
			        <van-icon size="15" name="arrow" color="#389eac"/>
			    </template>
			  </van-nav-bar>
			  
		  </van-grid-item>
		  
		  <van-grid-item icon="description" text="短篇作品" default @click="essays">
			<!-- 短篇作品-->
			<van-nav-bar>
			  <template #left>
				 <van-icon size="28" name="description" color="#333"/><span>短篇作品</span>
			  </template>
			  <template #right>
			      <van-icon size="15" name="arrow" color="#389eac" />
			  </template>
			</van-nav-bar>
			
		  </van-grid-item>
		</van-grid>
	</div>
	
	<!-- 轮播图 -->
	<swiper></swiper>
  </div>
</template>

<script>
	import Vue from 'vue';
	import Navbar from "@/components/Navbar.vue"
	import Swiper from "@/components/Swiper.vue"
	import Search from "@/views/home/Search.vue"

	export default {
		// name: 'Home',
		components: {
			Navbar,
			Swiper,
			Search,
		},
		data(){
			return{
				
			}
		},
		methods: {
		  search(){
					this.$store.commit('homeSearch')
				},
			
			//跳转连载页面 
		   columns(){
			   this.$router.push('/columns')
		   },
		   // 跳转短篇小说页面
		   essays(){
			   this.$router.push('/essays')
		   },
		},
		mounted() {
			this.$store.dispatch('getHomeBook')
		},
	}
</script>
<style lang="scss">
	#home{
		background-color: #F8F9F9;
		margin-bottom: 3.125rem;
		
		.van-popup--right {
			top:49.999%;
		}
	}
	#sort{
		border-top: 1px solid #ccc;
		
		.van-nav-bar{
			background-color: #eff2f3;
		}
		.van-grid-item__content{
			background-color: #F8F9F9;
			padding: 10px 0px;
			display: block;
			
			span{
				margin-left: 0.125rem;
				font-size: 15px;
			}
		}
		.van-grid-item__text{
			font-size: 15px;
		}
	}
</style>
